<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<h3>textAlign : start, end, left, right, or center</h3>
	<canvas id="c1" width=480 height=300 style="background:#f2f2f2;"></canvas>
	<script>
	(function(){
		var x = 240;
		var c1 = document.getElementById("c1");
		var ctx = c1.getContext("2d");
		var align = ["start","end","left","right","center"];
		ctx.font = "20px sans-serif";
		ctx.fillStyle = "red";
		ctx.strokeStyle = "#666";
		ctx.lineWidth = "0.5";
		ctx.beginPath();
		for(var i = 0; i < align.length; i++){
			ctx.textAlign = align[i];//start, end, left, right, or center
			y = (i+1)*50;
			ctx.fillText("hello text (align:"+align[i]+")",x, y );
			ctx.moveTo(x,y);
			ctx.lineTo(480,y);
		}
		ctx.stroke();
	})();
	</script>
	
	<h3>textBaseline : top, hanging, middle, alphabetic, ideographic, or bottom</h3>
	<canvas id="c2" width=480 height=300 style="background:#f2f2f2;"></canvas>
	<script>
	(function(){
		var x = 50;
		var cv = document.getElementById("c2");
		var ctx = cv.getContext("2d");
		var baseline = ["top", "hanging", "middle", "alphabetic", "ideographic", "bottom"];
		ctx.font = "16px sans-serif";
		ctx.fillStyle = "red";
		ctx.strokeStyle = "#666";
		ctx.lineWidth = "0.5";
		ctx.beginPath();
		for(var i = 0; i < baseline.length; i++){
			ctx.textBaseline = baseline[i];//start, end, left, right, or center
			y = (i+1)*50;
			ctx.fillText("hello text (baseline:"+baseline[i]+")",x, y );
			ctx.moveTo(x,y);
			ctx.lineTo(480,y);
		}
		ctx.stroke();
	})();
	</script>
	
	<h3>maxWidth : top, hanging, middle, alphabetic, ideographic, or bottom</h3>
	<canvas id="c3" width=480 height=300 style="background:#f2f2f2;"></canvas>
	<script>
	(function(){
		var x = 10;
		var cv = document.getElementById("c3");
		var ctx = cv.getContext("2d");
		var maxwidth = [5,10,20,50,80,100,200];
		ctx.font = "16px sans-serif";
		ctx.fillStyle = "red";
		ctx.strokeStyle = "#666";
		ctx.lineWidth = "0.5";
		ctx.beginPath();
		for(var i = 0; i < maxwidth.length; i++){
			y = (i+1)*50;
			ctx.fillText("hello text (maxwidth:"+maxwidth[i]+")",x, y, maxwidth[i] );
			ctx.moveTo(x,y);
			ctx.lineTo(480,y);
		}
		ctx.stroke();
	})();
	</script>
</body>
</html>